import React, { useState, useMemo, useEffect } from 'react'
import TopNav from '../../components/TopNav/TopNav'
import './Message.css'
import IndexChild from './Children/message/index'
import { Card, Button, PullRefresh, SwipeCell, Cell, Badge, Toast, Input, Popup } from 'react-vant'
import { Search, ArrowDown } from '@react-vant/icons';
import axios from 'axios';
import { useNavigate } from 'react-router'

const Message = () => {
    const [count, setCount] = useState(0)
    const [data, setData] = useState([])
    const [state, setState] = useState('')
    const [searchVisible, setSearchVisible] = useState(false);
    const handleSearchClick = () => {
        setSearchVisible(!searchVisible);
    };
    const handleSearchClicks = () => {
        setSearchVisible(false);
    };
    // 弹出层
    const [visible, setVisible] = useState(false)
    // const [state, setState] = useState('')
    // const [value, setValue] = useState('')
    const navigate = useNavigate() //跳转
    const Init = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/message')
        setData(res.data)
        // console.log(res.data);
    }

    useEffect(() => {
        Init()

    }, [])
    // 删除
    // const DeltetItem = async (id) => {
    //     // 根据ID进行数据的删除
    //     const res = await axios.delete('http://localhost:3000/my/message/' + id)
    //     console.log(res);
    //     // 重新渲染页面，若无 Init()，则会发生数据可以删除，页面不能实时更新
    //     Init()
    // }
    const deleteItem = async (id) => {
        try {
            const response = await axios.delete(`http://192.168.0.154:3000/my/message/${id}`);
            console.log('Deleted successfully:', response.data);
            Init()
        } catch (error) {
            if (error.response) {
                // 请求被处理，但返回了一个状态码  
                console.error('Error deleting:', error.response.data);
            } else {
                // 请求未被处理  
                console.error('Error deleting:', error.message);
            }
        }
    }


    // 下拉刷新
    const tips = useMemo(() => {
        if (count) {
            return `刷新次数: ${count}`
        }
        return '下拉试试'
    }, [count])

    const onRefresh = showToast => {
        return new Promise(resolve => {
            setTimeout(() => {
                if (showToast) {
                    Toast.info('刷新成功')
                }
                setCount(count + 1)
                resolve(true)
            }, 1000)
        })
    }

    return (
        <div style={{ height: '900px' }} >
            <TopNav />
            <div className='MessageTitle'>
                <p>消息</p>
            </div>
            <Card round className='MessageCard'>
                <div className='MessageHeader'>
                    <p>对话</p>
                    <div className='MessageHeaderRight' style={{ width: '100px' }}>
                        <Search style={{ fontSize: '20px' }} />

                        <Button type='primary' color='#598dff'>+</Button>
                    </div>
                </div>
                {/* 群组 */}
                <PullRefresh successText="刷新成功" onRefresh={onRefresh}>
                    <div className='MessageGroup'>
                        <div className='MessageGroupItem'
                        >
                            <ArrowDown />
                            <p>群组</p>
                        </div>
                        <div name='1'>
                            {
                                data.map(item => {
                                    return (
                                        <SwipeCell
                                            key={item.id}
                                            rightAction={
                                                <Button style={{ height: '100%' }} square type="danger" onClick={() => {
                                                    deleteItem(item.id)
                                                }}>
                                                    删除
                                                </Button>
                                            }
                                        >
                                            <Cell
                                                onClick={() => {
                                                    // 跳转到消息详情页，并将当前项传递过去
                                                    navigate('/messagedetail', { state: { item: item } })
                                                }}
                                            >
                                                <div className='MessageItem' >
                                                    <img src={item.crowdImage} alt="" style={{ width: '40px' }} />
                                                    <div className='MessageItem-Right'>
                                                        <p>{item.team}</p>
                                                        <p className='message-text-overflow'>{item.crowdDesc}</p>
                                                    </div>
                                                    <div>
                                                        <p>{item.crowdTime}</p>
                                                        <Badge content={item.crowdStrip} style={{ marginLeft: '12px' }} />
                                                    </div>
                                                </div>
                                            </Cell>
                                        </SwipeCell>
                                    )
                                })
                            }
                        </div>

                        {/* 列表 */}
                    </div>
                    <IndexChild />
                </PullRefresh >
                <Button color='#598dff' round className='Btn'
                    onClick={() => {
                        setVisible(true)
                    }}
                >+</Button>
                
            </Card >
        </div >
    )
}

export default Message